<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#FFFFFF" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pages/user/user" open-type="switchTab" class="back-button">
					<u-icon color="#333333" name="arrow-left" size="20"></u-icon>
					<view class="navbar-title">我的合同</view>
				</navigator>
			</view>
			<!-- <view slot="right" class="navbar-right">
				<view class="setting-btn" @click="handleSetting">
					<u-icon color="#999999" name="setting" size="20"></u-icon>
				</view>
			</view> -->
		</u-navbar>

		<!-- 功能卡片 -->
		<view class="card-container">
			<view class="card-item" @click="navigateToContractList">
				<view class="card-icon">
					<u-icon name="file-text" color="#4285F4" size="32"></u-icon>
				</view>
				<view class="card-info">
					<view class="card-title">合同管理</view>
					<view class="card-desc">查看和管理所有合同</view>
				</view>
			</view>

			<view class="card-item" @click="handleScan">
				<view class="card-icon">
					<u-icon name="scan" color="#28A745" size="32"></u-icon>
				</view>
				<view class="card-info">
					<view class="card-title">扫码识别</view>
					<view class="card-desc">扫描二维码识别合同</view>
				</view>
			</view>

			<view class="card-item" @click="handleAddContract">
				<view class="card-icon">
					<u-icon name="plus-circle" color="#FF9900" size="32"></u-icon>
				</view>
				<view class="card-info">
					<view class="card-title">新增合同</view>
					<view class="card-desc">创建新的合同记录</view>
				</view>
			</view>

			<!-- <view class="card-item" @click="handleHelp">
				<view class="card-icon">
					<u-icon name="question-circle" color="#FF0000" size="32"></u-icon>
				</view>
				<view class="card-info">
					<view class="card-title">帮助中心</view>
					<view class="card-desc">查看使用帮助和指南</view>
				</view>
			</view> -->
		</view>

		<!-- 统计信息 -->
		<view class="stats-container" v-if="statsData">
			<view class="stats-title">合同统计</view>
			<view class="stats-grid">
				<view class="stats-item">
					<view class="stats-value">{{ statsData.total }}</view>
					<view class="stats-label">总合同数</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{ statsData.signed }}</view>
					<view class="stats-label">已签署</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{ statsData.unsigned }}</view>
					<view class="stats-label">未签署</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{ statsData.expired }}</view>
					<view class="stats-label">已到期</view>
				</view>
			</view>
		</view>

		<!-- 最近合同 -->
		<view class="recent-container" v-if="recentContracts.length > 0">
			<view class="recent-header">
				<view class="recent-title">最近合同</view>
				<view class="recent-more" @click="navigateToContractList">查看全部</view>
			</view>
			<view class="recent-list">
				<view class="recent-item" v-for="(item, index) in recentContracts" :key="index"
					@click="navigateToContractDetail(item.id)">
					<view class="item-info">
						<view class="company-name">{{ item.companyName }}</view>
						<view class="contract-no">{{ item.contractNo }}</view>
					</view>
					<view class="contract-status data-v-db3ca21a" :class="[getStatusClass(item)]">
						{{ getStatusText(item) }}
					</view>
				</view>
			</view>
		</view>

		<!-- 加载中提示 -->
		<u-loading-page v-if="loading" :loading-text="loadingText"></u-loading-page>

		<!-- 操作结果提示 -->
		<u-toast ref="toast" :message="toastMessage" :type="toastType" :duration="2000"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultStartDate: this.formatDate(new Date()), // 初始化默认日期为今天
				loading: true,
				loadingText: '加载中...',
				statsData: null,
				recentContracts: [],
				toastMessage: '',
				toastType: 'success'
			};
		},
		computed: {
			// 带参数的计算属性，用于循环列表中动态获取每个合同的状态类
			getItemStatusClass() {
				// 返回一个函数，接收合同项作为参数
				return (item) => {
					// 直接复用原有 getStatusClass 方法的逻辑
					if (item.signDate === '未签署') {
						return 'status-pending';
					} else if (item.endDate && new Date(item.endDate) < new Date()) {
						return 'status-expired';
					} else {
						return 'status-signed';
					}
				};
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			// 格式化日期为 'YYYY-MM-DD'
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 加载数据
			loadData() {
				this.loading = true;

				// 模拟加载数据
				setTimeout(() => {
					// 模拟统计数据
					this.statsData = {
						total: 28,
						signed: 20,
						unsigned: 5,
						expired: 3
					};

					// 模拟最近合同数据
					this.recentContracts = [{
							id: '5',
							companyName: '深圳创新科技有限公司',
							contractNo: 'HT20230005',
							signDate: '2023-03-20',
							startDate: '2023-03-20',
							endDate: '2023-09-19',
							status: 'signed'
						},
						{
							id: '4',
							companyName: '上海未来信息技术有限公司',
							contractNo: 'HT20230004',
							signDate: '未签署',
							startDate: '',
							endDate: '',
							status: 'unsigned'
						},
						{
							id: '3',
							companyName: '北京智慧教育科技有限公司',
							contractNo: 'HT20230003',
							signDate: '2022-01-10',
							startDate: '2022-01-10',
							endDate: '2023-01-09',
							status: 'expired'
						}
					];

					this.loading = false;
				}, 500);
			},

			// 跳转到合同列表页
			navigateToContractList() {
				uni.navigateTo({
					url: '/pageNew/ContractManage/ContractManage'
				});
			},

			// 跳转到合同详情页
			navigateToContractDetail(id) {
				uni.navigateTo({
					url: `/pages/contract/detail?id=${id}`
				});
			},

			// 处理扫码
			handleScan() {
				// 检查实际项目中，这里应该调用扫码API
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: (res) => {
						console.log('扫码结果：', res.result);
						// 假设扫码结果是合同ID
						const contractId = res.result;
						if (contractId) {
							// 跳实际项目中，这里应该先验证合同是否存在
							uni.navigateTo({
								url: `/pages/contract/detail?id=${contractId}`
							});
						} else {
							this.showToast('未识别到有效合同信息', 'error');
						}
					},
					fail: (err) => {
						console.log('扫码失败：', err);
						if (err.errMsg === 'scanCode:fail cancel') {
							// 用户取消扫码
							return;
						}
						this.showToast('扫码失败，请重试', 'error');
					}
				});
			},

			// 处理新增合同
			handleAddContract() {
				uni.navigateTo({
					url: '/pageNew/ContractManage/add'
				});
			},

			// 处理帮助
			handleHelp() {
				uni.navigateTo({
					url: '/pages/common/help'
				});
			},

			// 处理设置
			handleSetting() {
				uni.navigateTo({
					url: '/pages/common/setting'
				});
			},

			// 获取合同状态文本
			getStatusText(item) {
				if (item.signDate === '未签署') {
					return '未签署';
				} else if (item.endDate && new Date(item.endDate) < new Date()) {
					return '已到期';
				} else {
					return '已签署';
				}
			},

			// 获取合同状态样式
			getStatusClass(item) {
				if (item.signDate === '未签署') {
					return 'status-pending';
				} else if (item.endDate && new Date(item.endDate) < new Date()) {
					return 'status-expired';
				} else {
					return 'status-signed';
				}
			},

			// 显示提示消息
			showToast(message, type = 'info') {
				this.toastMessage = message;
				this.toastType = type;
				this.$refs.toast.show();
			}
		}
	};
</script>

<style scoped>
	.back-button {
		display: flex;
		align-items: center;
	}

	/* 全局容器 */
	.page-container {
		min-height: 100vh;
		background-color: #F5F7FA;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: 600;
		color: #4285f4;
	}

	.navbar-right {
		display: flex;
		align-items: center;
	}

	.setting-btn {
		padding: 4px;
	}

	/* 功能卡片 */
	.card-container {
		padding: 16px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.card-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 120px;
		background-color: #FFFFFF;
		border-radius: 8px;
		padding: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.card-item:active {
		transform: translateY(2px);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.card-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-item:nth-child(1) .card-icon {
		background-color: rgba(66, 133, 244, 0.1);
	}

	.card-item:nth-child(2) .card-icon {
		background-color: rgba(40, 167, 69, 0.1);
	}

	.card-item:nth-child(3) .card-icon {
		background-color: rgba(255, 153, 0, 0.1);
	}

	.card-item:nth-child(4) .card-icon {
		background-color: rgba(255, 0, 0, 0.1);
	}

	.card-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 12px;
	}

	.card-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.card-desc {
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}

	/* 统计信息 */
	.stats-container {
		padding: 0 16px 16px;
	}

	.stats-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 12px;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.stats-item {
		height: 80px;
		background-color: #FFFFFF;
		border-radius: 8px;
		padding: 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.stats-value {
		font-size: 24px;
		font-weight: 600;
		color: #333333;
	}

	.stats-label {
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}

	/* 最近合同 */
	.recent-container {
		padding: 0 16px 80px;
		/* 留出底部底部操作栏留出空间 */
	}

	.recent-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.recent-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.recent-more {
		font-size: 14px;
		color: #4285F4;
	}

	.recent-list {
		background-color: #FFFFFF;
		border-radius: 8px;
		overflow: hidden;
	}

	.recent-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid #EEEEEE;
		transition: background-color 0.2s ease;
	}

	.recent-item:active {
		background-color: #F5F7FA;
	}

	.item-info {
		flex: 1;
	}

	.company-name {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}

	.contract-no {
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}

	.item-status {
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	.status-pending {
		background-color: #FFF2CC;
		color: #FF9900;
	}

	.status-signed {
		background-color: #D4EDDA;
		color: #28A745;
	}

	.status-expired {
		background-color: #F8D7DA;
		color: #DC3545;
	}
</style>